Reference · Layout
Section Layouts
The recurring arrangements of a section — from the feature grid to full-width. Each variant shows its class and a long demo text, so you can see how the body copy flows. All columns collapse to a single column automatically on mobile; images always come first in the HTML (good for screen readers).
Three columns
Feature grid with icon, headline and text
The .feature-grid class with
.feature blocks. Responsive 1 → 2 → 3 columns; six
entries make the calm 2×3 grid like on the homepage.
No build step
Pure HTML, CSS and JS. Runs on a double-click and on any server — no Node, no deploy ritual, no version chaos.
Everything through tokens
Three brand colors form the basis. Surfaces and hover tones are derived from them, while text contrasts remain deliberate decisions.
Privacy built in
Self-hosted fonts, an optional consent module with prior blocking and a technical basis for the contact form.
A11y built in
Skip link, visible focus, keyboard operation, reduced motion and recalculated contrasts create a solid basis.
Thinks in sections
Reusable building blocks and neutral templates. New pages come from combining, not from copy-paste chaos.
Guided AI context
Clear roles for rules, workflow and project decisions make Kitty machine-readable and an AI session consistent.
Two columns
Equal columns
The .cols .cols--2 class. Two
equally wide columns that share the space.
This is a two-column layout in a 50/50 ratio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Both columns are equally wide and start on the same line at the top. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi non quam. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Praesent dapibus, neque id cursus faucibus.
Image & Text
Image left, text right
The .cols .cols--3070 class.
Narrow image column on the left, wide text column on the right.
This is an image/text layout in a 30/70 ratio with the image on the left. The narrow left field works well for a round portrait, an award or a small key visual. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue.
Image & Text
Image right, text left
The .cols .cols--3070 .cols--reverse class.
Visually mirrored, but in the HTML the image stays first.
This is the same 30/70 layout, just with the image on the right.
The .cols--reverse class pushes the narrow column
visually to the right while it still comes first in the code —
good for reading order. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa.
Main & side column
Wide text, narrow side column
The .cols .cols--7030 class. The
main content on the left, a narrow column for an info box on the right.
This is a two-column layout in a 70/30 ratio. The wide column carries the main content, the narrow side column holds a margin note, a stat or a hint. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed.
Four columns
Compact feature grid
The .cols .cols--4 class. Four
narrow columns, responsive 1 → 2 → 4. Ideal for short features or services.
Minimal
Short texts, aligned flush to the top. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Responsive
Single column on mobile, then two, then four columns. Suspendisse lectus tortor, dignissim sit amet.
Versatile
Fits services, features or a concise list. Cras elementum ultrices diam.
Consistent
The same class logic as everywhere in the kit. Maecenas ligula massa, varius a, semper congue.
Full-width
Image across the full content width
The .media class. An image across
the full width with a fixed aspect ratio (default 16:9, changeable
via --media-ratio).
Keep browsing
More reference
The individual building blocks in detail — or the typography everything is set in.